<template>
	<view class="page-container">
		<view class="header">
			<view class="back-btn" @click="goBack">
				<text class="iconfont icon-back"></text>
			</view>
			<view class="title">客服咨询</view>
		</view>
		
		<!-- 用户信息卡片 -->
		<view class="user-card">
			<image class="avatar" :src="targetUser.avatar" mode="aspectFill"></image>
			<view class="info">
				<view class="basic-info">
					<text class="name">{{ targetUser.name }}</text>
					<text class="age">{{ targetUser.age }}岁</text>
					<text class="location">{{ targetUser.location }}</text>
				</view>
				<view class="tags">
					<text class="tag" v-for="(tag, index) in targetUser.tags" :key="index">{{ tag }}</text>
				</view>
			</view>
		</view>
		
		<!-- 聊天区域 -->
		<scroll-view 
			class="chat-container" 
			scroll-y 
			:scroll-top="scrollTop"
			:scroll-with-animation="true"
			@scrolltoupper="loadMoreMessages"
		>
			<view class="chat-list">
				<!-- 系统消息 -->
				<view class="system-message">
					<text class="text">您正在咨询客服，我们将为您提供专业的红娘服务</text>
				</view>
				
				<!-- 消息列表 -->
				<view 
					class="message-item" 
					:class="{ 'self': msg.isSelf }"
					v-for="(msg, index) in messages" 
					:key="index"
				>
					<image 
						class="avatar" 
						:src="msg.isSelf ? userInfo.avatar : serviceAvatar" 
						mode="aspectFill"
					></image>
					<view class="content">
						<text class="name">{{ msg.isSelf ? '我' : '红娘客服' }}</text>
						<view class="message-content">{{ msg.content }}</view>
					</view>
				</view>
			</view>
		</scroll-view>
		
		<!-- 输入区域 -->
		<view class="input-area">
			<input 
				class="input" 
				type="text" 
				v-model="inputMessage"
				placeholder="请输入消息..."
				:adjust-position="false"
				@focus="handleInputFocus"
				@blur="handleInputBlur"
				@confirm="sendMessage"
			/>
			<button 
				class="send-btn" 
				:class="{ 'active': inputMessage.trim() }"
				@click="sendMessage"
			>发送</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			userInfo: {
				avatar: 'https://202231117.oss-cn-beijing.aliyuncs.com/图像3.jpg'
			},
			targetUser: {
				id: '',
				name: '',
				age: '',
				location: '',
				avatar: '',
				tags: []
			},
			serviceAvatar: 'https://202231117.oss-cn-beijing.aliyuncs.com/女性客服1.png',
			messages: [],
			inputMessage: '',
			scrollTop: 0,
			defaultMessages: [
				{
					content: '您好，我是您的专属红娘顾问，很高兴为您服务。您对这位女士感兴趣是吗？',
					isSelf: false
				},
				{
					content: '我可以为您详细介绍她的情况，并帮助您们建立联系。',
					isSelf: false
				}
			]
		}
	},
	onLoad(options) {
		if (options.id) {
			this.fetchUserInfo(options.id)
		}
		// 添加默认消息
		setTimeout(() => {
			this.messages = [...this.defaultMessages]
			this.scrollToBottom()
		}, 500)
	},
	methods: {
		goBack() {
			uni.navigateBack()
		},
		fetchUserInfo(id) {
			// TODO: 调用接口获取用户信息
			// 模拟数据
			this.targetUser = {
				id: id,
				name: '张小姐',
				age: 28,
				location: '北京',
				avatar: 'https://202231117.oss-cn-beijing.aliyuncs.com/图像1.jpg',
				tags: ['硕士', '金融', '喜欢旅行']
			}
		},
		sendMessage() {
			if (!this.inputMessage.trim()) return
			
			// 添加用户消息
			this.messages.push({
				content: this.inputMessage,
				isSelf: true
			})
			
			// 清空输入
			this.inputMessage = ''
			
			// 滚动到底部
			this.scrollToBottom()
			
			// 模拟客服回复
			setTimeout(() => {
				this.messages.push({
					content: '好的，我明白了。这位女士条件很不错，她目前正在寻找一位稳重可靠的终身伴侣。您如果感兴趣的话，我建议可以先了解一下她的具体情况，看看是否合适。',
					isSelf: false
				})
				this.scrollToBottom()
			}, 1000)
		},
		scrollToBottom() {
			setTimeout(() => {
				const query = uni.createSelectorQuery().in(this)
				query.select('.chat-list').boundingClientRect(data => {
					this.scrollTop = data.height
				}).exec()
			}, 100)
		},
		loadMoreMessages() {
			// TODO: 加载更多历史消息
		},
		handleInputFocus() {
			// 输入框获取焦点时的处理
			this.scrollToBottom()
		},
		handleInputBlur() {
			// 输入框失去焦点时的处理
		}
	}
}
</script>

<style lang="scss">
.page-container {
	min-height: 100vh;
	background: #f8f9fa;
	display: flex;
	flex-direction: column;
	
	.header {
		height: 88rpx;
		background: #fff;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		position: relative;
		box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
		
		.back-btn {
			position: absolute;
			left: 30rpx;
			font-size: 36rpx;
			color: #333;
		}
		
		.title {
			flex: 1;
			text-align: center;
			font-size: 32rpx;
			font-weight: 500;
			color: #333;
		}
	}
	
	.user-card {
		background: #fff;
		margin: 20rpx;
		padding: 20rpx;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
		
		.avatar {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50rpx;
			margin-right: 20rpx;
		}
		
		.info {
			flex: 1;
			
			.basic-info {
				margin-bottom: 8rpx;
				
				.name {
					font-size: 28rpx;
					font-weight: 500;
					color: #333;
					margin-right: 12rpx;
				}
				
				.age, .location {
					font-size: 24rpx;
					color: #666;
					margin-right: 12rpx;
				}
			}
			
			.tags {
				display: flex;
				flex-wrap: wrap;
				gap: 8rpx;
				
				.tag {
					font-size: 22rpx;
					color: #f69489;
					background: rgba(246,148,137,0.1);
					padding: 4rpx 12rpx;
					border-radius: 20rpx;
				}
			}
		}
	}
	
	.chat-container {
		flex: 1;
		padding: 20rpx;
		
		.chat-list {
			.system-message {
				text-align: center;
				margin: 20rpx 0;
				
				.text {
					display: inline-block;
					font-size: 24rpx;
					color: #999;
					background: rgba(0,0,0,0.05);
					padding: 8rpx 20rpx;
					border-radius: 24rpx;
				}
			}
			
			.message-item {
				display: flex;
				margin-bottom: 30rpx;
				padding: 0 20rpx;
				
				&.self {
					flex-direction: row-reverse;
					
					.avatar {
						margin: 0 0 0 20rpx;
					}
					
					.content {
						align-items: flex-end;
						
						.name {
							text-align: right;
						}
						
						.message-content {
							background: #f69489;
							color: #fff;
							margin-right: 12rpx;
							
							&::before {
								left: auto;
								right: -16rpx;
								border-color: transparent transparent transparent #f69489;
							}
						}
					}
				}
				
				.avatar {
					width: 80rpx;
					height: 80rpx;
					border-radius: 40rpx;
					margin-right: 20rpx;
					flex-shrink: 0;
				}
				
				.content {
					display: flex;
					flex-direction: column;
					max-width: 60%;
					
					.name {
						font-size: 24rpx;
						color: #999;
						margin-bottom: 8rpx;
					}
					
					.message-content {
						background: #fff;
						padding: 16rpx 24rpx;
						border-radius: 16rpx;
						font-size: 28rpx;
						color: #333;
						position: relative;
						word-break: break-all;
						margin-left: 12rpx;
						
						&::before {
							content: '';
							position: absolute;
							top: 20rpx;
							left: -16rpx;
							border-width: 8rpx;
							border-style: solid;
							border-color: transparent #fff transparent transparent;
						}
					}
				}
			}
		}
	}
	
	.input-area {
		background: #fff;
		padding: 20rpx;
		display: flex;
		align-items: center;
		border-top: 2rpx solid #f5f5f5;
		
		.input {
			flex: 1;
			height: 72rpx;
			background: #f8f9fa;
			border-radius: 36rpx;
			padding: 0 24rpx;
			font-size: 28rpx;
			margin-right: 20rpx;
		}
		
		.send-btn {
			width: 120rpx;
			height: 72rpx;
			background: #ddd;
			color: #fff;
			border-radius: 36rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			transition: all 0.3s;
			
			&.active {
				background: #f69489;
			}
		}
	}
}
</style> 